<template>
<section>
    <Search :searchList="searchList" @search="search" ref="search">

    </Search>
    <ButtonBar :keyName="key" @callAction="callAction">

    </ButtonBar>

    <div class="table">
        <el-table ref="singleTable" @select="select" :data="moduleTableDataList" highlight-current-row v-loading="listLoading" style="width: 100%;" max-height="490" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
            <el-table-column type="selection">
            </el-table-column>
            <el-table-column type="index" label="列号" width="65">
            </el-table-column>
            <el-table-column prop="Name" label="名字">
            </el-table-column>
            <el-table-column prop="Group" label="组名">
            </el-table-column>
            <el-table-column prop="OrderSort" label="排序" width="65">
            </el-table-column>
            <el-table-column prop="IsEnabled" label="状态" ilter-placement="bottom-end" width="70">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.IsEnabled ===true ? 'success' : 'danger'" disable-transitions>{{(scope.row.IsEnabled===true?'启用':'禁用')}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="CreateTime" label="创建时间" :formatter="formatTime">
            </el-table-column>
            <el-table-column prop="ModifiedTime" label="修改时间" :formatter="formatTime">
            </el-table-column>
            <el-table-column prop="LinkUrl" label="链接地址">
            </el-table-column>
            <el-table-column prop="Description" label="描述">
            </el-table-column>
        </el-table>

    </div>
    <!--列表-->

    <!--工具条-->
    <el-col :span="24" class="paging">

        <el-pagination background layout="total,prev, pager, next" :page-size='pageSize' :total="total" :current-page="pageIndex" @current-change="currentChange" style="text-align:center;">
        </el-pagination>
    </el-col>

    <el-dialog :title="dialogTitle" :visible.sync="formVisible" v-model="formVisible" :close-on-click-modal="false">

        <el-form :model="formModel" label-width="80px" :rules="formRules" ref="formModel">
            <el-form-item label="名字" prop="Name">
                <el-input v-model="formModel.Name" auto-complete="off" name="Name"></el-input>
            </el-form-item>
            <el-form-item label="URl地址" prop="LinkUrl">
                <el-input v-model="formModel.LinkUrl" name="LinkUrl" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="编号">
                <el-input v-model="formModel.Code" name="Code" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="状态" prop="IsEnabled">
                <el-radio-group v-model="formModel.IsEnabled" name="IsEnabled" prop="IsEnabled" size="small">
                    <el-radio-button :label="true">启用</el-radio-button>
                    <el-radio-button :label="false">禁用</el-radio-button>
                </el-radio-group>

            </el-form-item>
            <el-form-item label="排序号" prop="OrderSort">
                <el-input-number v-model="formModel.OrderSort" :min="0" :max="200" name="OrderSort"></el-input-number>
            </el-form-item>
            <el-form-item label="组名" prop="Group">
                <el-select v-model="formModel.Group" placeholder="请选择" name="Group">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="描述">
                <el-input type="textarea" v-model="formModel.Description" name="Description" auto-complete="off"></el-input>
            </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click.native="cancel">取消</el-button>
            <el-button type="primary" @click.native="submitForm" :loading="loading">提交</el-button>
        </div>
    </el-dialog>
</section>
</template>

<script>
import Search from '@/views/Search.vue';
import util from '../../common/js/util';
import ButtonBar from '@/components/ButtonBar'
import Paging from '@/components/Paging'
import {
    getModuleListPage,
    addOrUpdateModuleAsync,
    deleteModule

} from '../../api/api';
export default {
    data() {

        return {
            key: "模块列表",
            searchList: [{

                value: "",
                name: "Name",
                title: "模块名字",
                valueType: "",
            }],
            moduleTableDataList: [],

            listLoading: false,
            pageSize: 10,
            total: 0,
            pageIndex: 1,
            selection: [],
            dialogTitle: "新增",
            formVisible: false,
            loading: false,
            formModel: {

                Name: "",
                LinkUrl: "",
                OrderSort: 0,
                IsEnabled: true,
                Description: "",
                Code: "",
                Group: "",
            },
            formRules: {
                Name: [{
                        required: true,
                        message: '请输入模块API名字',
                        trigger: 'blur'
                    },
                    {
                        min: 1,
                        max: 50,
                        message: '长度在 1 到 50 个字符',
                        trigger: 'blur'
                    }
                ],
                IsEnabled: [{
                    required: true,
                    message: '请选择状态',
                    trigger: 'blur'
                }],
                LinkUrl: [{
                    required: true,
                    message: '请输入模块API地址',
                    trigger: 'blur'
                }],
            },
            options: [{
                value: 'User 用户信息接口',
                label: 'User 用户信息接口'
            }, {
                value: 'Role 角色信息接口',
                label: 'Role 角色信息接口'
            }, {
                value: 'Permission 权限信息接口',
                label: 'Permission 权限信息接口'
            }, {
                value: 'Module 模块信息接口',
                label: 'Module 模块信息接口'
            }, {
                value: 'Common 公共信息',
                label: 'Common 公共信息'
            }],
        }

    },

    components: {
        Search,
        ButtonBar,
        Paging
    },
    methods: {
        callAction: function (params) {
            util.callAction(this, params);
        },
        search: function (data) {
            this.getModules(data);
        },
        selsChange: function (sels) {
            this.sels = sels;
        },
        select: function (selection, row) {

            this.selection = selection;
        },
        currentChange: function (row) {
            this.pageIndex = row;
            if (this.total > 1) {
                this.getModules();
            }

            //
        },
        formatTime: function (row, column, cellValue, index) {
            var crtTime = new Date(cellValue);
            return util.formatDate.dateFtt("yyyy-MM-dd hh:mm:ss", crtTime);
        },
        //获取用户列表
        getModules: function (filters) {

            let newFilters = filters || [];
            let para = {

                pageSize: this.pageSize,
                filters: newFilters,
                pageIndex: newFilters.length > 0 ? 1 : this.pageIndex,
            };
            this.listLoading = true;
            //NProgress.start();
            getModuleListPage(para).then((res) => {
                if (res.data.success) {
                    this.total = res.data.total;
                    this.moduleTableDataList = res.data.data;
                    this.listLoading = false;
                }

                //NProgress.done();
            });
        },
        //取消
        cancel: function () {
            this.formVisible = false;

            this.$refs['formModel'].resetFields();
        },
        submitForm: function () {
            this.$refs.formModel.validate((valid) => {
                if (valid) {
                    this.$confirm('确认提交吗？', '提示', {}).then(() => {
                        this.loading = true;
                        //NProgress.start();
                        let para = Object.assign({}, this.formModel);

                        addOrUpdateModuleAsync(para).then((res) => {

                            if (util.isEmt.format(res)) {
                                this.loading = false;
                                return;
                            }
                            if (res.success) {
                                this.loading = false;
                                //NProgress.done();
                                this.$message({
                                    message: res.message,
                                    type: 'success'
                                });
                                this.$refs['formModel'].resetFields();
                                this.formVisible = false;
                                this.getModules();
                            } else {
                                this.loading = false;
                                this.$message({
                                    message: res.message,

                                    type: 'error'
                                });

                            }

                        });

                    });
                }
            });
        },
        handleAdd: function () {
            this.dialogTitle = "新增";
            let para = {};
            this.formVisible = true;
            this.formModel = Object.assign({}, { //表单数据
                Name: "",
                LinkUrl: "",
                OrderSort: 0,
                IsEnabled: true,
                Description: "",
                Code: "",
                Group: "",
            });
        },
        handleUpdate: function () {
            let _this = this;
            util.getSingleSelectionTableData(this.selection, function (id, row) {
                _this.dialogTitle = "修改";

                _this.formModel = Object.assign({}, row);
                _this.formVisible = true;

            });
        },
        handleDelete: function () {
            var _this = this;
            util.getSingleSelectionTableData(_this.selection, function (id, row) {
                var para = {
                    id: id
                };
                _this.listLoading = true;

                deleteModule(para).then((res) => {
                    if (res.success) {

                        _this.$message({
                            message: res.message,
                            type: 'success'
                        });
                        //_this.$refs.search.reset();
                        _this.getModules();

                    } else {

                        _this.$message({
                            message: res.message,

                            type: 'error'
                        });
                    }

                });
                _this.listLoading = false;

            });
        }

    },
    mounted() {
        this.getModules();
    }
}
</script>
